<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="500"
    :confirm-btn="{ loading }"
    @confirm="dialogConfirm"
    @close="dialogHide"
  >
    <t-space direction="vertical" style="width: 100%">
      <t-form ref="form" reset-type="initial" :data="formData" :rules="FORM_RULES">
        <t-form-item :label="t('pages.sensitive.addway')" :initial-data="1">
          <t-radio-group v-model="addType" :disabled="type === 'edit'">
            <t-radio :value="1">{{ t('pages.sensitive.single') }}</t-radio>
            <t-radio :value="2">{{ t('pages.sensitive.batch') }}</t-radio>
          </t-radio-group>
        </t-form-item>

        <!-- 单条添加 -->
        <template v-if="addType === 1">
          <t-form-item :label="t('pages.sensitive.word')" name="word" initial-data="">
            <t-input v-model="formData.word" maxlength="20" show-limit-number />
          </t-form-item>
          <t-form-item :label="t('pages.sensitive.replace')" name="replaceWord" initial-data="">
            <t-input v-model="formData.replaceWord" maxlength="20" show-limit-number />
          </t-form-item>
          <t-form-item :label="t('pages.sensitive.classify')" name="classify" initial-data="">
            <t-select v-model="formData.classify" :options="dictSencetive" clearable />
          </t-form-item>
        </template>

        <!-- 多条添加 -->
        <template v-if="addType === 2">
          <t-form-item :label="t('pages.sensitive.word')" name="words" initial-data="">
            <t-textarea
              v-model="formData.words"
              :autosize="{ minRows: 4, maxRows: 10 }"
              :placeholder="t('pages.sensitive.format')"
              maxlength="500"
              show-limit-number
            />
            <template #help>
              1. {{ $t('pages.sensitive.tip1') }}<br />
              2. {{ $t('pages.sensitive.tip1') }}<br />
              3. {{ $t('pages.sensitive.classify') }} 【{{ dictSencetiveStr }}】
            </template>
          </t-form-item>
        </template>
      </t-form>
    </t-space>
  </t-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';

import { t } from '@/locales';

import { FORM_DATA, FORM_RULES, FormItem } from '../constants';

const props = defineProps({
  dictSencetive: {
    type: Array,
    default: () => [],
  },
});

const dictSencetiveStr = ref('');
watch(
  props.dictSencetive,
  (val) => {
    dictSencetiveStr.value = val.map((v: any) => `${v.value}:${v.label}`).join(',');
  },
  {
    immediate: true,
  },
);

const loading = ref(false);
const emits = defineEmits(['confirm']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);
const form = ref(null);
const formData = ref({ ...FORM_DATA });
const addType = ref(1);

const dialogShow = (action: string, row: FormItem) => {
  visible.value = true;
  type.value = action;
  if (action === 'edit') {
    formData.value = JSON.parse(JSON.stringify(row));
    formData.value.classify = row.classify.toString();
    dialogTitle.value = `${t('common.edit')}【${row.word}】`;
  } else {
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  loading.value = false;
  form.value.reset();
  addType.value = 1;
  visible.value = false;
};
const dialogConfirm = async () => {
  const valid = await form.value.validate();
  if (valid !== true) {
    return;
  }
  loading.value = true;

  const data = formData.value;
  let res: any[] = [];

  if (addType.value === 1) {
    delete data.words;
    const row = {
      id: data.id,
      word: data.word,
      replaceWord: data.replaceWord,
      classify: data.classify,
    };
    if (type.value === 'add') {
      delete data.id;
    }
    res = [row];
  }
  if (addType.value === 2) {
    const rows = data.words.split('\n');
    rows.forEach((v) => {
      const cols = v.split(/[,，]/g);
      res.push({
        word: cols[0],
        replaceWord: cols[1],
        classify: cols[2],
      });
    });
  }

  emits('confirm', type.value, res);
};

defineExpose({
  dialogShow,
  dialogHide,
});
</script>
